<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>就餐方式</title>
    <script src="../lib/jquery-3.4.1.js"></script>
    <script src="../lib/constant.js"></script>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <style>
        *{
            font-family: '微软雅黑 Light';
        }
        .mySelected{
            border-color: #5FB878;
            background-color: #5FB878;
            color: white;
        }
        .ava{
            background-color: #00F7DE;
        }
        .una{
            color: white;
            background-color: grey;
        }
        .tableSelected{
            color: white;
            background-color: orangered;
        }
    </style>
</head>
<body>
<div style="width:100%;display: flex;flex-direction: column;align-items: center;justify-content: center;padding-top: 30px;margin-bottom:15px;">
    <h1>选择用餐方式</h1>
    <div style="display: flex;flex-display:row;justify-content: center;align-items: center;margin-top: 20px;margin-bottom: 20px;">
        <div id="tangshi" style="font-weight:600;font-size:16px;padding:8px 8px;border-top-left-radius: 12px;border-bottom-left-radius: 12px; border-top: 2px solid black;border-bottom: 2px solid black;border-left: 2px black solid;border-right: 1px black solid;">店内就餐</div>
        <div id="waimai" style="font-weight:600;font-size:16px;padding:8px 8px;border-top-right-radius: 12px;border-bottom-right-radius: 12px; border-top: 2px solid black;border-bottom: 2px solid black;border-left: 1px black solid;border-right: 2px black solid;">外卖送餐</div>
    </div>
    <div style="width: 90%;height: 400px;margin-bottom: 20px;">
        <div id="tangshiDiv">
            <div class="layui-form-item">
                <label class="layui-form-label">用餐人数</label>
                <div class="layui-input-block">
                    <select id="cap" style="width: 150px;height: 36px;" onchange="getTables()">
                        <option value="1" selected>1</option>               //默认选取
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </div>
            </div>
            <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: center;">
                <div style="width: 80px;height: 20px;font-size: 15px;display: flex;flex-direction: row;justify-content: space-around;align-items: center;"><div style="width: 15px;height: 15px;background-color: #00F7DE;border: 1px black solid;"></div><span>可用</span></div>
                <div style="width: 80px;height: 20px;font-size: 15px;display: flex;flex-direction: row;justify-content: space-around;align-items: center;"><div style="width: 15px;height: 15px;background-color: grey;border: 1px black solid;"></div><span>不可用</span></div>
                <div style="width: 80px;height: 20px;font-size: 15px;display: flex;flex-direction: row;justify-content: space-around;align-items: center;"><div style="width: 15px;height: 15px;background-color: orangered;border: 1px black solid;"></div><span>已选</span></div>
            </div>
            <div id="tables" style="display:flex;width: 100%;height: 320px;margin-top: 20px;flex-direction: row;flex-wrap: wrap;align-content:flex-start">

            </div>
        </div>
        <div id="waimaiDiv" style="display: none;">
            <div class="layui-form-item myFormItem">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" id="name" placeholder="请输入姓名" autocomplete="off" class="layui-input" maxlength="16" />
                </div>
            </div>
            <div class="layui-form-item myFormItem">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="number" id="tele" placeholder="请输入手机号" autocomplete="off" class="layui-input" maxlength="11" minlength="11"/>
                </div>
            </div>
            <div class="layui-form-item myFormItem">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-block">
                    <input type="text" id="address" placeholder="请输入地址" autocomplete="off" class="layui-input" maxlength="50" />
                </div>
            </div>
        </div>
    </div>
    <button class="layui-btn" onclick="submit()">开始点餐</button>
    <button style="width: 60px;height: 25px;margin-top: 5px;" onclick="javascript:window.location.href='home.html'">返回</button>
</div>





<script>
    //监听点击来实现切换外卖和堂食的窗口
    var currentSelect=null;
    var currentTable=0;
    $(function () {
        $("#waimai").click(function () {
            currentSelect="waimai";
            $("#waimai").attr("class","mySelected");                //为选择按钮设置已选样式并移除另一方当选择样式
            $("#tangshi").removeAttr("class");
            $("#waimaiDiv").removeAttr("style");                    //移除display：none属性并为另一方添加不可见，实现在点击时切换
            $("#tangshiDiv").attr("style","display:none;");
            $.ajax({
                type: 'get',
                url: RequestURL + '/getUserInfo',
                success: function (data) {
                    $("#name").val(data.name);
                    $("#tele").val(data.tele);
                    $("#address").val(data.address);
                }
            });
        });
        $("#tangshi").click(function () {
            currentSelect="tangshi";
            $("#tangshi").attr("class","mySelected");
            $("#waimai").removeAttr("class");
            $("#tangshiDiv").removeAttr("style");
            $("#waimaiDiv").attr("style","display:none;");
        });
        $("#tangshi").click();
        getTables();
    });

    //获取餐桌
    function getTables(){
        let cap = $("#cap").val().trim();
        $.ajax({
            async:false,
            type: 'get',
            data:{
                "cap":cap
            },
            url: RequestURL + '/getFreeTablesByCap',
            success: function (data) {
                currentTable=0;
                let res="";
                if(data.length==0) res+="店内暂无满足用餐人数的餐桌";            //查询到没有状态为1的记录，即没有空闲桌子
                else for(let i=0;i<data.length;i++){
                    //可用
                    if(data[i].tstate==1) res+="<div class='ava' id='table"+data[i].tid+"' style='text-align:center;font-size:28px;font-weight:700;width: 40px;height: 40px;border:1px black solid;margin:10px;' onclick='changeTable("+data[i].tid+")'>"+data[i].tid+"</div>";
                    //不可用
                    else res+="<div class='una' id='table"+data[i].tid+"' style='text-align:center;font-size:28px;font-weight:700;width: 40px;height: 40px;border:1px black solid;margin:10px;'>"+data[i].tid+"</div>";
                }
                $("#tables").html(res);
            }
        })
    }


    function changeTable(tid) {
        if(currentTable==0) {                                       //未选择状态则进行选中
            currentTable=tid;
            let class2 = $("#table"+currentTable).attr("class");
            class2+=" tableSelected";
            $("#table"+currentTable).attr("class",class2);
        }
        else if(currentTable!=tid){                                 //更改选中
            let class1 = $("#table"+currentTable).attr("class");
            $("#table"+currentTable).removeAttr("class");
            $("#table"+currentTable).attr("class",class1.substring(0,3));
            currentTable=tid;
            let class2 = $("#table"+currentTable).attr("class");
            class2+=" tableSelected";
            $("#table"+currentTable).attr("class",class2);
        }else if(currentTable==tid){                                //二次选中则取消
            let class1 = $("#table"+currentTable).attr("class");
            $("#table"+currentTable).removeAttr("class");
            $("#table"+currentTable).attr("class",class1.substring(0,3));
            currentTable=0;
        }
    }





    function submit() {
        if(currentSelect=="waimai"){
            let address=$("#address").val().trim();
            let name=$("#name").val().trim();
            let tele=$("#tele").val().trim();
            if(address==null||address==''||name==''||name==null||tele==null||tele==''){
                alert("请输入收货信息");
                return false;
            }
            $.ajax({
                type: 'post',
                url: RequestURL + '/setPreOrderInfo',
                data:{
                    "type":1,                           //用于标识外卖请求
                    "address":address,
                    "name":name,
                    "tele":tele
                },
                success: function (data) {
                    window.location.href="make2.html";
                }
            });
        }
        else{
            if(currentTable==0){
                alert("请选桌!");
                return false;
            }
            $.ajax({
                type: 'post',
                url: RequestURL + '/setPreOrderInfo',
                data:{
                    "type":0,                           //用于标识堂食请求
                    "tid":currentTable
                },
                success: function (data) {
                    window.location.href="make2.html";
                }
            });

        }
    }



</script>
</body>
</html>